import MyData from "./MyData/MyData";
import "./LogItem.css";
import Card from "../../UI/Card";
import Backdrop from "../../UI/Backdrop/index";
import Confirm from "../../UI/Confirm";
import React, { useState } from "react";
const LogItem = (props) => {
    const [showConfirm, setShowConfirm] = useState(false);

    const deleteHander = () => {
        setShowConfirm(true);
    };
    const canceldeleteHander = () => {
        setShowConfirm(false);
    }
    const clickHander = (event) => {
        event.preventDefault();//取消默认行为
        event.stopPropagation();//取消冒泡
        alert("clicnd");
    };
    return (
        <Card className="items">
            {showConfirm && <Backdrop>
                <Confirm confitmText="确认是否提交" canceldeleteHander={canceldeleteHander} />
            </Backdrop>}
            <MyData data={props.data} />
            <div className="rightData">
                <div className="title">{props.title}</div>
                <div className="content">{props.content}</div>
                <button onClick={deleteHander}>删除</button>
                <a href="#" onClick={clickHander}>按钮</a>
            </div>
        </Card>
    );
};
export default LogItem;